<template>
  <view class="content online_list">
    <u-navbar
      back-text=""
      title=""
      :background="background"
      :border-bottom="false"
      title-color="#ffffff"
      :is-back="false"
    >
      <view class="slot-wrap">
        <image
          src="../../static/jiantous.png"
          mode=""
          style="width: 42rpx; height: 42rpx; margin: 28rpx 60rpx 26rpx 34rpx"
          @click="returns()"
        ></image>
        <view class="searchinput">
          <u-search
            placeholder="搜索藏品名"
            shape="square"
            v-model="value"
            :show-action="false"
            bg-color="#292B2B"
            color="#666666"
            border-color="rgba(255,255,255,0.2200)"
            @change="$u.debounce(search, 1500, false)"
          ></u-search>
          <text
            style="color: #ffffff"
            class="input_text"
            @click="$u.debounce(search, 1000, true)"
            >搜索</text
          >
        </view>
      </view>
    </u-navbar>

    <view class="tabs">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
        bg-color="transparent"
        active-color="#1FE7E7"
        inactive-color="#ffffff"
      ></u-tabs>
    </view>

    <view class="filterRow" v-if="current == 1">
      <view class="filterRow_item" @click="ChangeFilter(0)">
        <view :class="now_filter == 0 ? 'highlight' : ''">上架时间</view>
        <image
          :src="now_filter == 0 ? upDownImg : upDownImgUncheck"
          class="filterRow_item_icon"
        ></image>
      </view>
      <view class="filterRow_item" @click="ChangeFilter(1)">
        <view :class="now_filter == 1 ? 'highlight' : ''">交易时间</view>
        <image
          :src="now_filter == 1 ? upDownImg : upDownImgUncheck"
          class="filterRow_item_icon"
        ></image>
      </view>
      <!-- @click="ChangeFilter(2)" -->
      <view
        class="filterRow_item"
        :class="now_filter == 2 ? 'highlight' : ''"
        @click="timeFilter"
        >时间段</view
      >
    </view>
    <u-calendar
      v-model="show_calendar"
      :mode="mode"
      @change="calendarConfirm"
    ></u-calendar>

    <view>
      <view class="Collection_item" v-if="display">
        <block v-for="(item, index) in display" :key="index">
          <view
            class="Collection_img"
            @click="toCollection(item.id, index, item.order_no)"
          >
            <!-- <view class="quantity" :style="item.status==1?'':'color:#39A2FF'">上架中</view> -->
            <view v-if="item.pay_status == 1 && current == 0" class="quantity"
              >待付款</view
            >
            <view
              v-else-if="item.pay_status == 2 && current == 0"
              class="quantity"
              >交易成功</view
            >
            <view
              v-else-if="item.pay_status == 4 && current == 0"
              class="quantity"
              >超时未支付</view
            >

            <view v-if="item.status == 0 && current == 1" class="quantity"
              >未上架</view
            >
            <view v-else-if="item.status == 1 && current == 1" class="quantity"
              >上架中</view
            >
            <view v-else-if="item.status == 2 && current == 1" class="quantity"
              >等待买家付款</view
            >
            <view v-else-if="item.status == 3 && current == 1" class="quantity"
              >交易成功</view
            >

            <view class="">
              <image
                :src="item.user_product.product.cover"
                class="Collection_image"
              ></image>
            </view>
            <view class="Collection_right">
              <text class="Collection_right_text">{{
                item.user_product.product.name
              }}</text>
              <view class="number_wrapper">
                <text>NO:</text>
                <text class="item_center">{{ item.user_product.no }}</text>
              </view>
              <view style="">
                <text>￥</text>
                <text style="font-size: 24rpx">{{ item.price }}</text>
              </view>
            </view>
          </view>
          <view class="unpaid" v-if="item.pay_status == 1">
            <view class="unpaid_top">
              <u-count-down
                :timestamp="item.seconds"
                separator="colon"
                separator-color="#1FE7E7"
                separator-size="28"
                font-size="28"
                @end="end(index)"
                color="#1FE7E7"
                :show-border="false"
                bg-color="transparent"
              ></u-count-down>
              <view class="unpaid_left">后关闭</view>
            </view>
            <view style="display: flex">
              <view
                class="unpaid_right"
                @click="toCollection(item.id, index, item.order_no)"
                >去支付</view
              >
            </view>
          </view>
        </block>
      </view>
    </view>
    <empty :show.sync="pagestate"></empty>
  </view>
</template>

<script>
import api from "../../api/api";
import moment from "moment";
import { getTimeleft } from "@/utils/timeleft.js";
export default {
  data() {
    return {
      list: [
        {
          name: "我买到的",
        },
        {
          name: "我卖出的",
        },
      ],
      background: {
        backgroundColor: "#1E2020",
      },
      current: 0,
      value: "",
      marketlist: [],
      shoplist: [],
      display: [],
      page: 1,
      pagestate: false,
      displaystate: false,

      now_filter: 0,
      upDownImg: "/static/price_high.png",
      upDownImgUncheck: "/static/price.png",
      now_filter_state: 0,
      show_calendar: false,
      mode: "range",
      startDate: "",
      endDate: "",
    };
  },
  onLoad() {
    // this.lists()
    this.myshopList();
  },
  onShow() {
    // this.lists()
    // this.myshopList()

    uni.$off("offshop");
    uni.$on("offshop", (index) => {
      this.display.splice(index.index, 1);
    });
  },
  onReachBottom() {
    this.page++;
    if (this.current == 0) {
      this.myshopList();
    }
    if (this.current == 1) {
      this.lists();
    }
  },
  methods: {
    calendarConfirm(e) {
      // console.log(e);
      this.page = 1;
      this.startDate = e.startDate;
      this.endDate = e.endDate;
      this.lists();
    },
    timeFilter() {
      this.show_calendar = true;
    },
    ChangeFilter(index) {
      this.page = 1;
      this.marketlist = [];
      if (index == 2) {
        this.now_filter = index;
        this.show_calendar = true;
        return;
      }

      if (index != this.now_filter) {
        this.now_filter_state = 0;
        this.upDownImg = "/static/price_high.png";
      } else {
        if (this.now_filter_state == 0) {
          this.now_filter_state = 1;
          this.upDownImg = "/static/price_low.png";
        } else {
          this.now_filter_state = 0;
          this.upDownImg = "/static/price_high.png";
        }
      }
      // console.log(this.now_filter_state);
      this.now_filter = index;

      this.lists();
    },
    search() {
      this.page = 1;
      this.pagestate = false;
      if (this.current == 0) {
        this.myshopList();
      }
      if (this.current == 1) {
        this.lists();
      }
    },
    toCollection(order_id, index, order) {
      if (this.current == 0) {
        uni.navigateTo({
          url: `../../pages/order_detail/order_detail?order_no=${order}&market=${true}&order_id=${order_id}`,
        });
        return;
      }
      uni.navigateTo({
        url: `../../pages/online_detail/online_detail?id=${order_id}&index=${index}`,
      });
    },
    async myshopList() {
      let res = await api.myBoughtList({
        method: "POST",
        query: {
          page: this.page,
          limit: this.limit,
          name: this.value,
        },
        // loading:'加载中'
      });
      if (res.code == 0) {
        res.data.forEach((el) => {
          el.user_product = el.consignment.user_product;
          el.price = el.consignment.price;
          el.seconds = getTimeleft(el.expire_at, el.now_at).duration;
        });

        uni.stopPullDownRefresh();
        // this.pagestate = true;
        if (this.page == 1) {
          this.shoplist = res.data;
          if (res.data.length == 0) {
            this.pagestate = true;
          }
        } else {
          if (res.data.length > 0) {
            this.shoplist = [...this.shoplist, ...res.data];
          }
        }
        this.display = this.shoplist;
      }
    },
    async lists() {
      let order = this.now_filter_state == 0 ? "asc" : "desc";
      let res = await api.myReleaseList({
        method: "POST",
        query: {
          page: this.page,
          limit: this.limit,
          name: this.value,
          put_time_sort: this.now_filter == 0 ? order : "",
          transaction_time_sort: this.now_filter == 1 ? order : "",
          // start_at: this.now_filter == 2 ? this.startDate + " 00:00:00" : "",
          // end_at: this.now_filter == 2 ? this.endDate + " 23:59:59" : "",
          start_at: this.startDate ? this.startDate + " 00:00:00" : "",
          end_at: this.endDate ? this.endDate + " 23:59:59" : "",
        },
        loading: "加载中",
      });
      if (res.code == 0) {
        uni.stopPullDownRefresh();
        // this.pagestate = true;
        this.displaystate = true;
        console.log(this.page, "this.page");
        if (this.page == 1) {
          this.marketlist = res.data;
          if (res.data.length == 0) {
            this.pagestate = true;
          }
        } else {
          if (res.data.length > 0) {
            this.marketlist = [...this.marketlist, ...res.data];
          }
        }
        this.display = this.marketlist;
      }
    },
    end(index) {
      this.myshopList();
      // this.shoplist[index].pay_status = 4
      // this.display = this.shoplist
    },
    handlePay(order_no) {
      uni.navigateTo({
        url: `../../pages/order_detail/order_detail?order_no=${order_no}&market=${true}`,
      });
    },
    returns() {
      uni.navigateBack({
        delta: 1,
      });
    },
    change(index) {
      this.current = index;
      this.pagestate = false;
      this.page = 1;
      if (index == 0) {
        this.myshopList();
        this.display = this.shoplist;
      } else if (index == 1) {
        this.lists();
        this.now_filter = 0;
        this.now_filter_state = 0;
        this.startDate = "";
        this.now_filter_state = "";
        // if(this.marketlist.length==0){
        //   this.lists()
        //   return
        // }
        // this.display = this.marketlist
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.content {
  width: 100%;
  height: 100%;
  background: $bg-color1;
  min-height: 100vh;
}
.slot-wrap {
  display: flex;
  align-items: center;
  /* 如果您想让slot内容占满整个导航栏的宽度 */
  flex: 1;
  justify-content: space-between;
  /* 如果您想让slot内容与导航栏左右有空隙 */
  padding: 0 30rpx 0 0;

  .searchinput {
    margin-right: 100rpx;
    flex: 1;
    border-radius: 35rpx;
    position: relative;
    display: flex;
    width: 504rpx;
    height: 72rpx;
    // border: 2rpx solid #0144ef;

    line-height: 72rpx;
    .input_text {
      position: absolute;
      right: 0;
      // z-index: 999;

      width: 128rpx;
      height: 68rpx;
      background: linear-gradient(90deg, #1fe6e6 0%, #3f9ed2 48%, #df7fd6 100%);
      border-radius: 6rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 68rpx;
    }
  }
}
.tabs {
  // margin: 0 0 30rpx 0;
  height: 50px;
  // border-bottom: 5rpx solid #1A1E35;
  position: relative;
  .price {
    position: absolute;
    right: 60rpx;
    top: 30rpx;
    width: 16rpx;
    height: 24rpx;
    z-index: 99;
    padding: 0 10rpx;
  }
}
.filterRow {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 84rpx;
  width: 750rpx;
  border-top: 2rpx solid #292b2b;
  border-bottom: 2rpx solid #292b2b;
  &_item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    // width: 104rpx;
    height: 36rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 36rpx;
    text-align: center;
    &_icon {
      margin-left: 10rpx;
      width: 16rpx;
      height: 24rpx;
      // padding: 30rpx 10rpx 30rpx 100rpx;
    }
  }
  .highlight {
    color: #1fe7e7;
  }
}
.Collection_item {
  margin: 0 30rpx;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  color: #ffffff;

  .Collection_img {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    // background-color: #101428;
    border-radius: 15rpx;
    margin: 15rpx 0 15rpx 0;
    width: 100%;
    position: relative;

    background-image: url("/static/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    .Collection_image {
      width: 240rpx;
      height: 240rpx;
      border-radius: 24rpx;
    }

    .Collection_right {
      margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 200rpx;
      .Collection_right_text {
        font-size: 28rpx;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .number_wrapper {
        display: flex;
        align-items: center;
      }
      .item_center {
        display: inline-block;
        max-width: 360rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .Collectio_button {
        width: 186rpx;
        height: 60rpx;
        border-radius: 30rpx;
        background-image: linear-gradient(137deg, #39a2ff 0%, #9e00d3 100%);
        text-align: center;
        line-height: 60rpx;
        color: #0c1125;
        font-size: 28rpx;
      }
      .Collectio_openbutton {
        width: 100%;
        height: 60rpx;
        border-radius: 30rpx;
        background-color: #606060;
        text-align: center;
        line-height: 60rpx;
        color: #0c1125;
        font-size: 28rpx;
      }
    }
    .quantity {
      position: absolute;
      right: 30rpx;
      bottom: 30rpx;
      color: #1fe7e7;
      z-index: 2;
      line-height: 36rpx;
      text-align: center;
    }
  }
}
.unpaid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16rpx 0 30rpx;
  width: 690rpx;
  height: 100rpx;
  background: #292b2b;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  .unpaid_top {
    display: flex;
    align-items: center;
  }
  &_left {
    height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #1fe7e7;
    line-height: 40rpx;
  }
  &_right {
    width: 144rpx;
    height: 68rpx;
    color: #ffffff;
    background: linear-gradient(90deg, #1fe6e6 0%, #df7fd6 100%);
    border-radius: 34rpx;

    font-size: 28rpx;
    font-weight: 400;
    line-height: 68rpx;
    text-align: center;
  }
}
</style>

<style lang="scss">
/deep/ .u-tab-bar {
  width: 64rpx !important;
  background: #0144ef;
  margin-left: -5px !important;
  margin-top: 50rpx !important;
}
/deep/ .u-tab-item {
  height: 50px !important;
}
</style>
